<template>
  <div class="cardNo">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>添加银行卡</span>
        <el-button
          style="float: right;"
          type="primary"
          @click="$router.push('/card/cardManger')"
          >返回</el-button
        >
      </div>
      <el-form label-width="80px" :model="addForm">
        <el-form-item label="账户姓名">
          <el-input clearable v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input clearable v-model="addForm.certNo"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-input clearable v-model="addForm.cardNo"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input clearable v-model="addForm.code">
            <el-button
              :disabled="disabled"
              slot="append"
              type="primary"
              icon="el-icon-s-promotion"
              @click="getBindCode"
              >{{ text }}</el-button
            ></el-input
          >
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button
          @click="BindCard"
          type="primary"
          :disabled="
            addForm.name && addForm.cardNo && addForm.certNo && addForm.code
              ? false
              : true
          "
          >立即绑定</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import { getBindCodeApi, BindCardApi } from "../../api/card";
export default {
  data() {
    return {
      disabled: false,
      time: null,
      text: "获取验证码",
      addForm: {
        name: "",
        cardNo: "",
        certNo: "",
        code: "",
      },
    };
  },
  methods: {
    //获取验证码
    getBindCode() {
      let loading = this.$loading({
        lock: true,
        text: "发送中...",
      });
      getBindCodeApi()
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.$message.success("发送成功!");
            this.disabled = true;
            let num = 60;
            this.time = setInterval(() => {
              if (num > 0) {
                num = num - 1;
                this.text = `${num}s后重新获取`;
              } else {
                this.disabled = false;
                this.text = "重新获取";
                clearInterval(this.time);
              }
            }, 1000);
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    // 绑定
    BindCard() {
      let loading = this.$loading({
        lock: true,
        text: "绑定中...",
      });
      let arr = {
        cardNo: this.addForm.cardNo,
        certNo: this.addForm.certNo,
        code: this.addForm.code,
        name: this.addForm.name,
      };
      BindCardApi(arr)
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.$message.success("绑定成功!");
            clearInterval(this.time);
            this.$router.push("/card/cardManger");
          }
        })
        .catch(() => {
          loading.close();
        });
    },
  },
};
</script>

<style lang="scss">
.cardNo {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);

  .el-card {
    width: 70%;
    height: 80%;
    margin: 0 auto;
    .el-card__body {
      height: 60%;
    }
    .el-form {
      width: 50%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .el-input-group__append {
        .el-button {
          background: #409eff;
          color: #fff;
        }
      }
    }
    .btn {
      margin: 10% auto;
      width: 30%;
      .el-button {
        width: 100%;
      }
    }
  }
}
</style>